<template>
  <div id="app">
   <div v-if="web==0"><router-view/></div>
   <div v-if="web==1" class="app_web">
    <!-- 导航 -->
    <div class="app_nav">
  
  
       <el-menu
      router
      :default-active="onRoutes"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    
       <div class="app_top_k">
        <img src='../src/assets/img/zp3.jpg' class="app_top"  alt=""/>
      </div>
      <el-menu-item index="/about">
        <i class="el-icon-house"></i>
        <span slot="title">懂我</span>
      </el-menu-item>
       <el-menu-item index="/knewme">
        <i class="el-icon-medal"></i>
        <span slot="title">细述</span>
      </el-menu-item>
       <el-menu-item index="/telme">
        <i class="el-icon-phone-outline"></i>
        <span slot="title">co我</span>
      </el-menu-item>
      
      
       </el-menu>
        <appnavbg class="app_nav_bg"></appnavbg>  
    </div>
    <!-- 内容 -->
    <div class="app_er"><router-view/></div>
   </div>
  
  </div>
</template>
<script>
 import appnavbg from './components/appnavbg'  

export default {
    data() {
      return {
        web:'0',    //0移动，1pc
      
    
      };
    },
    created() {
     
      
      if(this._isMobile()){
    //  console.log('移动')
        this.web=0
      }else{
    //  console.log('pc')
    this.web=1
     
      }
      
    },
    computed:{
	onRoutes() {
				return this.$route.path;
			},
    },
     components: {
     appnavbg
    },
    methods:{
       _isMobile() {
	 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
	 return flag;
},
 handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.app_nav{
  width: 150px;
  height: 100vh;
  background: #545c64;

}
.app_er{
  width: calc(100% - 150px);
  height: 100vh;
  background:#fff;
}
.app_web{
  display: flex;

}
</style>
<style >
.el-menu-item{
padding: 0px;
}
.app_nav .el-menu{
  border: none;
}
.app_top{
  height: 100px;
  width: 100px;
  object-fit: cover;
}
.app_top_k{
  margin: auto;
 /* margin-top:10px ; */
 margin-bottom:20px ;
  height: 100px;
  width: 100px;
  border-radius:150px;
  overflow: hidden;

}

.app_nav_bg{
 
  position:absolute;
   z-index:99999;
   bottom: 0px;
   left: 0px;
   /* background: #000; */
}
</style>
